<template>
  <view class="container">
    <!-- 景点图片轮播 -->
    <view class="spot-swiper-section">
      <u-swiper :list="spotImages" :autoplay="true" :circular="true" :interval="3000" height="300"></u-swiper>
    </view>

    <!-- 基础信息卡片 -->
    <view class="info-card basic-info-card">
      <text class="spot-name">{{ model.name }}</text>
      <view class="rating-visitors">
        <view class="rating-info">
          <u-rate :value="model.rating" :count="5" :size="14" active-color="#fbbf24" inactive-color="#e5e7eb" :readonly="true"></u-rate>
          <text class="rating-text">{{ model.rating }}分</text>
        </view>
        <text class="visitors-text">已接待 {{ model.visitors }}人次</text>
      </view>
      <view class="tags-section" v-if="spotTags.length > 0">
        <u-tag v-for="tag in spotTags" :key="tag" :text="tag" plain bg-color="#e0f2fe" color="#0369a1" border-color="transparent" size="mini" shape="circle"
          :custom-style="{ marginRight: '12rpx', marginBottom: '12rpx' }"></u-tag>
      </view>
    </view>

    <!-- 门票与开放时间卡片 -->
    <view class="info-card ticket-hours-card">
      <view class="info-item">
        <u-icon name="rmb-circle" color="#64748b" size="18"></u-icon>
        <text class="item-label">门票价格：</text>
        <text class="item-value price-value">{{ model.price === 0 ? '免费' : `¥${model.price}` }}</text>
      </view>
      <view class="info-item">
        <u-icon name="clock" color="#64748b" size="18"></u-icon>
        <text class="item-label">开放时间：</text>
        <text class="item-value">{{ model.openHours }}</text>
      </view>
      <view class="info-item">
        <u-icon name="map" color="#64748b" size="18"></u-icon>
        <text class="item-label">地址：</text>
        <text class="item-value">{{ model.address }}</text>
      </view>
      <view class="info-item">
        <u-icon name="grid" color="#64748b" size="18"></u-icon>
        <text class="item-label">类别：</text>
        <text class="item-value">{{ model.category }}</text>
      </view>
    </view>

    <!-- 景点描述卡片 -->
    <view class="info-card description-card">
      <view class="section-title">
        <u-icon name="file-text" color="#0ea5e9" size="18"></u-icon>
        <text class="title-text">景点介绍</text>
      </view>
      <text class="description-content">{{ model.description }}</text>
    </view>

    <!-- 用户评价卡片 -->
    <view class="info-card review-card" v-if="false">
      <view class="section-title">
        <u-icon name="chat" color="#10b981" size="18"></u-icon>
        <text class="title-text">用户评价 ({{ mockReviews.length }})</text>
        <text class="more-text" @click="goToReviews">查看全部 ></text>
      </view>
      <view class="review-list" v-if="mockReviews.length > 0">
        <view class="review-item" v-for="(review, index) in mockReviews" :key="index">
          <view class="review-header">
            <u-avatar :src="review.avatar" size="30"></u-avatar>
            <text class="reviewer-name">{{ review.name }}</text>
            <u-rate :value="review.rating" :count="5" :size="12" active-color="#fbbf24" inactive-color="#e5e7eb" :readonly="true"></u-rate>
          </view>
          <text class="review-content">{{ review.content }}</text>
          <text class="review-time">{{ review.time }}</text>
        </view>
      </view>
      <u-empty v-else mode="data" text="暂无评价" icon-size="80" text-size="24"></u-empty>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <u-button icon="map-fill" @click="handeNavLocation">导航</u-button>
    </view>

    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        model: {
          id: '',
          "name": "故宫",
          "province": "北京市",
          "city": "北京市",
          "address": "北京市东城区景山前街4号",
          "description": "故宫，旧称紫禁城，是珍贵的文物，是了解中国历史和文化的重要窗口。",
          "category": "历史文化",
          "openHours": "08:30-17:00 (周一闭馆)",
          "price": 60, // 故宫门票通常不是免费，这里设为60元
          "rating": 4.8,
          "tagsJson": `["古建筑","博物馆","亲子游","世界遗产","历史遗迹"]`,
          "visitors": 8000,
          "imageUrls": `["https://picsum.photos/800/600?random=1", "https://picsum.photos/800/600?random=2"]`,
          "id": "20250705001"
        },

        mockReviews: [
          { id: 1, name: '游客A', avatar: '/static/images/user-avatar-1.png', rating: 5, content: '故宫太壮观了，历史的厚重感扑面而来，值得一来！', time: '2025-07-10' },
          { id: 2, name: '游客B', avatar: '/static/images/user-avatar-2.png', rating: 4, content: '人有点多，但是建筑和文物都很精美，讲解器很有用。', time: '2025-07-08' },
          { id: 3, name: '游客C', avatar: '/static/images/user-avatar-3.png', rating: 5, content: '带孩子来的，学到了很多历史知识，非常棒的体验。', time: '2025-07-05' }
        ],

        // 按钮样式
        bookNowBtnStyle: {
          flex: '1',
          background: 'linear-gradient(135deg, #0ea5e9, #06b6d4)',
          border: 'none',
          height: '80rpx',
          fontSize: '32rpx',
          marginLeft: '24rpx'
        }
      }
    },
    computed: {
      spotTags() {
        try {
          return this.model.tagsJson ? JSON.parse(this.model.tagsJson) : [];
        } catch (e) {
          console.error("Error parsing tagsJson:", e);
          return [];
        }
      },
      spotImages() {
        try {
          return this.model.imageUrls ? JSON.parse(this.model.imageUrls) : [];
        } catch (e) {
          console.error("Error parsing imageUrls:", e);
          return [];
        }
      }
    },
    onLoad(options) {

      // 模拟根据ID加载景点数据
      if (options.id) {
        this.model.id = options.id;
        this.fetchData();
      }
    },
    methods: {

      fetchData() {
        uni.$u.http.get('/api/scene/' + this.model.id).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)
            return
          }
          this.model = result
          // console.log(result)
        }).catch(err => {
          console.error('获取信息失败:', err)
        })
      },

      goToReviews() {
        console.log('查看全部评价');
        this.$refs.uToast.show({
          message: '功能开发中',
          type: 'info'
        });
        // uni.navigateTo({ url: `/pages/spot/spot-reviews?id=${this.model.id}` });
      },
      handeNavLocation() {
        let pos = this.model.position
        if (!pos) {
          this.$refs.uToast.show({
            message: '未找到位置信息',
            type: 'info'
          });
          return
        }
        let lnglat = JSON.parse(this.model.position)


        uni.openLocation({
          latitude: lnglat[1], // 故宫经纬度示例
          longitude: lnglat[0],
          name: this.model.name,
          address: this.model.address
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
  }


  .info-card {
    background: white;
    border-radius: 24rpx;
    margin: 0 10rpx 10rpx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f1f5f9;
  }

  .basic-info-card {
    margin-top: 24rpx; // 留出顶部导航栏的空间

    .spot-name {
      font-size: 48rpx;
      font-weight: bold;
      color: #1e293b;
      line-height: 1.3;
      margin-bottom: 16rpx;
      display: block;
    }

    .rating-visitors {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .rating-info {
        display: flex;
        align-items: center;
        gap: 8rpx;

        .rating-text {
          font-size: 26rpx;
          color: #64748b;
        }
      }

      .visitors-text {
        font-size: 26rpx;
        color: #64748b;
      }
    }

    .tags-section {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16rpx;
      gap: 10upx;
    }
  }

  .ticket-hours-card {
    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .item-label {
        font-size: 28rpx;
        color: #94a3b8;
        margin-left: 16rpx;
        width: 160rpx;
        flex-shrink: 0;
      }

      .item-value {
        flex: 1;
        font-size: 28rpx;
        color: #334155;

        &.price-value {
          font-weight: 600;
          color: #ef4444;
        }
      }
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 32rpx;

    .more-text {
      margin-left: auto;
      font-size: 26rpx;
      color: #64748b;
    }
  }

  .description-card {
    .description-content {
      font-size: 28rpx;
      color: #475569;
      line-height: 1.6;
    }
  }

  .review-card {
    .review-list {
      .review-item {
        background: #f8fafc;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .review-header {
          display: flex;
          align-items: center;
          gap: 16rpx;
          margin-bottom: 16rpx;

          .reviewer-name {
            font-size: 26rpx;
            color: #334155;
            font-weight: 500;
          }
        }

        .review-content {
          font-size: 28rpx;
          color: #475569;
          line-height: 1.5;
          margin-bottom: 16rpx;
        }

        .review-time {
          font-size: 22rpx;
          color: #94a3b8;
        }
      }
    }
  }

  .bottom-space {
    height: 40rpx; // 底部留白，防止内容被底部操作栏遮挡
  }

  .bottom-action-bar {
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    margin-bottom: 100px;
  }
</style>